<template>
  <!-- 最外层容器 -->
  <el-container class="home-con">
    <!-- 左侧菜单栏 开始 -->
    <el-aside
      class="app-side sid app-side-left"
      :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'"
      :width="isCollapse ? '70px' : '202px'"
    >
      <!-- 收缩和展示 左侧 菜单图标 -->
      <div
        class="toggle-button"
        @click="isCollapse ? (isCollapse = false) : (isCollapse = true)"
      >
        |||
      </div>
      <div style="text-align:left;">
        <!-- 我是左侧菜单 开始-->
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 一级菜单 -->
          <el-submenu
            class="my-baacground-color"
            :index="'/' + item.menuUrl"
            v-for="item in menuList"
            :key="item.menuId"
          >
            <template slot="title">
              <img class="icon" :src="item.menuIcon" />
              <!-- <icon class="icon" :name="item.menuIcon" /> -->
              <span>{{ item.menuName }}</span>
            </template>
            <!-- 循环二级菜单 -->
            <el-menu-item
              v-for="it in item.menuList"
              :key="it.menuId"
              :index="'/' + it.menuUrl"
              @click="saveNavState('/' + it.menuUrl)"
            >
              <template slot="title">
                <img class="icon" :src="it.menuIcon" />
                <span>{{ it.menuName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <!-- 我是左侧菜单 结束-->
      </div>
    </el-aside>
    <!-- 左侧菜单栏 结束 -->

    <!-- 头部与主体区域 开始 -->
    <el-container>
      <!-- 头部  开始-->
      <el-header
        class="app-header"
        style="height:40px;border-bottom:2px solid #FD7C27"
      >
      <div class="tangerine-icon" style="float:left">
        <img style="width:40px" src="@/svg/tangerine.svg"/>
      </div>
        <div class="app-header-userinfo">
          <el-dropdown trigger="hover" :hide-on-click="false">
            <img class="head-img" src="@/svg/timg.gif" alt="" />
            <span class="el-dropdown-link">
              {{ username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="my-el-dropdown-item">我的消息</el-dropdown-item>
              <el-dropdown-item  class="my-el-dropdown-item">设置</el-dropdown-item>
              <el-dropdown-item  class="my-el-dropdown-item" divided @click.native="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 头部  结束-->
      <!-- 主体区域 开始 -->
      <el-main class="app-body">
        <router-view />
      </el-main>
      <!-- 主体区域 结束 -->
    </el-container>
    <!-- 头部与主体区域 结束 -->
  </el-container>
</template>

<script>
import { queryMenu } from '@/network/index'
export default {
  name: 'Container',
  data() {
    return {
      username: '', // 登入后用户用户名
      isCollapse: false, // 控制左侧菜单列表 缩放
      menuList: [], // 菜单列表
      activePath: '' // 被激活的菜单地址
    }
  },
  methods: {
    // 退出登入
    logout: function() {
      this.$confirm('确认退出?', '提示', {})
        .then(() => {
          // 情况sessionStorage 并跳转登入页面
          sessionStorage.removeItem('user')
          sessionStorage.removeItem('activePath')
          sessionStorage.removeItem('menuList')
          sessionStorage.removeItem('role')
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    // 保存点击菜单后的激活状态
    saveNavState(activePath) {
      this.activePath = activePath
      sessionStorage.setItem('activePath', activePath)
    },
    // 一级左侧菜单栏 展开与关闭时间
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  // 生命周期函数 vue对象被挂载 dom结构初始化后调用 之前调用 此方法
  mounted: async function() {
    const loading = this.$loading({
      lock: true,
      text: '初始化页面中',
      spinner: 'el-icon-loading'
    })
    this.activePath = sessionStorage.getItem('activePath') // 从sessionStorage 中获取被激活的地址
    // this.menuList = menu.menuList // 获取用户的菜单权限
    let user = sessionStorage.getItem('user') // 获取用户信息

    if (user) {
      let us = JSON.parse(user)
      this.username = us.adAccount
      let menuList = sessionStorage.getItem('menuList')
      if (!menuList) {
        let res = await queryMenu(us)
        // 缓存角色信息
        sessionStorage.setItem(
          'role',
          JSON.stringify(JSON.parse(res.resp_data).role)
        )
      
        this.menuList = JSON.parse(res.resp_data).list
        sessionStorage.setItem('menuList', JSON.stringify(this.menuList))
      } else {
        this.menuList = JSON.parse(menuList)
      }
   
      loading.close()
    }
  }
}
</script>

<style lang="less" scoped>
.app-header-userinfo {
  height: 100%;
  text-align: right;
}
.home-con {
  height: 100%;
}
.sid {
  border-right: solid 1px #e6e6e6;
}
.el-menu {
  border: none;
}
.icon {
  width: 15px;
  height: 15px;
  margin-right: 9px;
}
.toggle-button {
  background-color: #f8f7f2;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 24px;
  cursor: pointer;
}
.el-dropdown-link {
  display: inline-block;
  height: 100%;
  padding: 10px;
  vertical-align: middle;
}
.head-img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.tangerine-icon::after{
  content: '';
  display: inline-block;
  clear: both;
}
</style>
